{% block extra_libraries %}
<link type="text/css" rel="stylesheet" href="/static/css/jquery.tooltip.css" />
<script src="/static/javascript/jquery.tooltip.min.js" type="text/javascript"></script>
<script src="/static/javascript/highcharts/highcharts.js" type="text/javascript"></script>
<script src="/static/javascript/highcharts/exporting.js" type="text/javascript"></script>

{% endblock %}

{% block content %}

<div id ="title-container">
    <h2>Planning - <a href="/iterations?project_id={{ iteration.project.key.id }}">{{ iteration.project.name }}</a> &raquo;
        <a href="/?id_it={{ iteration.key.id }}">{{ iteration.name }}</a>
    </h2>
</div>

<div id="chart_container" style="min-width: 700px; height: 250px; margin: 0 auto"></div>

<div id="table-contain" class="ui-widget">
    <table class="ui-widget ui-widget-content">
        <col width="15%" />
        <thead>
            <tr class="ui-widget-header" >
                <th>Tasks\Users</th>
                {% for member in iteration.get_project.get_members %}
                <th>{{ member.user.nickname }}</th>
                {% endfor%}
            </tr>
        </thead>
        <tbody>
            <tr>
                {% for item in iteration.get_total_tasks_assigned %}
                {% if forloop.first %}
                <th class="ui-widget-header">{{ item }}</th>
                {% else %}
                <td>{{ item }}</td>
                {% endif %}
                {% endfor %}
            </tr>
        </tbody>
    </table>
</div>
<span>
    <button  id="create-story"  type="button" val="{{iteration.key.id}}">
        Add Story
    </button >
</span>
<div id="stories">
    {% for story in iteration.get_stories %}
    <div id="id_story_{{ story.key.id }}" class="story">
        <div class="title" id="id_tooltip_title_{{ story.key.id }}">
            <span id="id_name_{{ story.key.id }}" class="float_left">
                <span>[</span>
                <span><a href="#" id="edit_{{ story.key.id }}" value="{{ story.key.id }}">Edit</a></span> |
                <span><a href="#" id="move_{{ story.key.id }}" value="{{ story.key.id }}">Move</a></span>
                <span>]</span>
                <span class="name mensaje">
                    <a href="#" id="title_{{ story.key.id}}" name="{{ story.key.id}}" title="Show details">{{ story.name|escape }}</a>
                </span>
            </span>
            <div id="id_name_div_{{ story.key.id }}" class="hide float_left">
                <form action="/reqajax/planning_name_form" method="post" id="name_form_{{ story.key.id }}">
                    <input type="hidden" name="story_id" value="{{ story.key.id }}">
                    <input type="text" name="name" id="name_{{story.key.id}}" size="50" class="text ui-widget-content ui-corner-all">
                    <button  title="Save" type="button" class="ui-button_custom save">
                        <span>Save</span>
                    </button >
                    <button  title="Cancel" type="button" class="ui-button_custom cancel">
                        <span>Cancel</span>
                    </button >
                </form>
            </div>
            <div id="id_move_div_{{ story.key.id }}" class="hide float_left">
                <form action="/reqajax/move_story" method="post" id="move_form_{{ story.key.id }}">
                    <input type="hidden" name="story_id" value="{{ story.key.id }}">
                    <select name="story_container" id="id_story_container" class="select ui-widget-content ui-corner-all">
                        {% for container in iteration.get_containers %}
                        <option value="{{ container.key }}">{{ container.name }}</option>
                        {% endfor %}
                    </select>
                    <button  title="Save" type="button" class="ui-button_custom save">
                        <span>Save</span>
                    </button >
                    <button  title="Cancel" type="button" class="ui-button_custom cancel">
                        <span>Cancel</span>
                    </button>
                </form>
            </div>
        </div>
        <div class="progress_container">
            <div class="story_detail">
                <span class="date float_left" id="id_tooltip_assigned_{{ story.key.id }}"> Assigned to:
                    <a href="#" class="mensaje" id="id_assigned_to_{{ story.key.id }}" title ="Updated" value="{{ story.key.id }}">{{ story.assigned_to }}</a>&nbsp;|&nbsp;</span>
                <div id="id_assigned_to_div_{{ story.key.id }}" class="hide float_left">
                    <form action="/reqajax/planning_assign_form" method="post" id="assign_form_{{ story.key.id }}">
                        <input type="hidden" name="story_id" value="{{ story.key.id }}">
                        <select name="assigned_to" id="assigned_to" class="select ui-widget-content ui-corner-all">
                            {% for member in iteration.get_project.get_members %}
                            <option value="{{ member.key.id }}">{{ member.user.nickname }}</option>
                            {% endfor%}
                        </select>
                        <button  title="Save" type="button" class="ui-button_custom save">
                            <span>Save</span>
                        </button >
                        <button  title="Cancel" type="button" class="ui-button_custom cancel">
                            <span>Cancel</span>
                        </button >
                    </form>
                </div>
                <span class="date float_left" id="id_tooltip_category_{{ story.key.id }}"> Category:
                    <a href="#" id="id_category_{{ story.key.id }}" value="{{ story.key.id }}">{{ story.category }}</a>&nbsp;|&nbsp;
                </span>
                <div id="id_category_div_{{ story.key.id }}" class="hide float_left">
                    <form action="/reqajax/planning_category_form" method="post" id="category_form_{{ story.key.id }}">
                        <input type="hidden" name="story_id" value="{{ story.key.id }}">
                        <select name="category" class="select ui-widget-content ui-corner-all">
                            <option value="Feature" selected="selected">Feature</option>
                            <option value="Bug">Bug</option>
                        </select>
                        <button  title="Save" type="button" class="ui-button_custom save">
                            <span>Save</span>
                        </button >
                        <button  title="Cancel" type="button" class="ui-button_custom cancel">
                            <span>Cancel</span>
                        </button >
                    </form>
                </div>
                <span class="date float_left" id="id_tooltip_priority_{{ story.key.id }}"> Priority:
                    <a href="#" id="id_priority_{{ story.key.id }}" value="{{ story.key.id }}">{{ story.priority }}</a>&nbsp;|&nbsp;
                </span>
                <div id="id_priority_div_{{ story.key.id }}" class="hide float_left">
                    <form action="/reqajax/planning_priority_form" method="post" id="priority_form_{{ story.key.id }}">
                        <input type="hidden" name="story_id" value="{{ story.key.id }}">
                        <select name="priority" class="select ui-widget-content ui-corner-all">
                            <option value="Very High">Very High</option>
                            <option value="High">High</option>
                            <option value="Normal" selected="selected">Normal</option>
                            <option value="Low">Low</option>
                            <option value="Very Low">Very Low</option>
                        </select>
                        <button  title="Save" type="button" class="ui-button_custom save">
                            <span>Save</span>
                        </button >
                        <button  title="Cancel" type="button" class="ui-button_custom cancel">
                            <span>Cancel</span>
                        </button >
                    </form>
                </div>

                <span class="date float_left" id="id_tooltip_time_{{ story.key.id }}">Hours:
                    <a href="#" id="id_estimated_time_{{ story.key.id }}" value="{{ story.key.id }}">{{ story.estimated_time }}</a></span>
                <div id="id_estimated_time_div_{{ story.key.id }}" class="hide float_left">
                    <form action="/reqajax/planning_time_form" method="post" id="time_form_{{ story.key.id }}">
                        <input type="hidden" name="story_id" value="{{ story.key.id }}">
                        <input type="text" name="time" class="text ui-widget-content ui-corner-all"  size="1">
                        <button  title="Save" type="button" class="ui-button_custom save">
                            <span>Save</span>
                        </button >
                        <button  title="Cancel" type="button" class="ui-button_custom cancel">
                            <span>Cancel</span>
                        </button >
                    </form>
                </div>
            </div>
        </div>
        <div id="story_box_{{story.key.id}}" style="display: none" class="story_body">
            <div class="note  ui-corner-all">
                <div class="header ui-widget-content ui-corner-top" id="id_tooltip_desc_{{story.key.id}}">
                    <span>Description</span>
                    <span class="person"><a href="#">{{ story.opened_by }}</a></span>&nbsp;
                    <span>{{story.opened_date|date:"D, M j, Y"}}</span>
                    <nobr>
                        <span style="cursor: pointer;" id="edit_desc_{{story.key.id}}" value="{{story.key.id}}">
                            <span><img
                                    src="/static/css/images/edit.png"
                                    width="16" height="16" border="0" alt="Edit" title="Edit"></span></span>
                    </nobr>
                </div>
                <div class="body ui-widget-content ui-corner-bottom">
                    <span id="id_desc_{{story.key.id}}"><pre id="id_desc_pre_{{story.key.id}}" class="text">{{ story.description|escape}}</pre></span>
                    <div id="edit_form_{{story.key.id}}" class="hide">
                        <form action="/reqajax/edit_ip_description" method="post" id="edit_description_form_{{story.key.id}}">
                            <input type="hidden" name="story_id" id="story_id" value="{{ story.key.id }}">
                            <li>
                                <textarea cols="75" rows="5" id="description_{{story.key.id}}" name="description" class="text ui-widget-content ui-corner-all"></textarea>
                            </li>
                            <li>
                                <button  title="Save" type="button" class="save_">
                                    <span>Save</span>
                                </button >
                                <button  title="Cancel" type="button" class="cancel_">
                                    <span>Cancel</span>
                                </button >
                            </li>
                        </form>
                    </div>
                </div>
            </div>
            <div id="tabs-1" class="comments">
                <ul>
                    <li>
                        <ul id="comments_{{story.key.id}}" class="commentList">
                            {% for comment in story.planning_comments %}
                            <li>
                                <div>
                                    <a href="#" >{{comment.author.nickname}}</a>
                                    <span >{{comment.text}}</span>
                                </div>
                            </li>
                            {% endfor %}
                        </ul>
                    </li>
                    <li>
                        <div>
                            <form action="/reqajax/comment_planning_story" method="post" id="comment_story_{{ story.key.id }}">
                                <input type="hidden" name="story_id" value="{{ story.key.id }}">
                                <div>
                                    <div>
                                        <textarea name="comment" title="Write a comment..." placeholder="Write a comment..." class="text ui-widget-content ui-corner-all" ></textarea>
                                    </div>
                                    <div>
                                        <input value="Comment" name="comment" type="submit" >
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<div>
    <div id="dialog_story_form"  class="form_container tmp_dialog" title="Create new Task">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){

        showToolTip = function (id, user) {
            var current_user = '{{ user.nickname }}';
            if (current_user != user) {
                var message = 'Updated by ' + user;
                $(id).tooltip({
                    bodyHandler: function() {
                        var offset = $(id).offset(),
                        top = offset.top,
                        left = offset.left;
                        $('#tooltip').css({top: top, left: left});
                        return message;
                    },
                    delay: 0,
                    showURL: false,
                    showBody: " - ",
                    fade: 250
                });
                $(id).mouseover();
                setTimeout(function() { $(id).mouseout(); }, 2 * 1000);
            }
        };
        updateSeries = function(array) {
            var hours = [];
            for(var i in  array) {
                hours.push(array[i][1]);
            }
            chart.series[0].setData(hours, true);
        };

        $(function() {
            $("input:button.save, button.save" ).button({
                icons: {
                    primary: "ui-icon-circle-check"
                },
                text: false
            });
        });
        $(function() {
            $("input:button.save, button.cancel" ).button({
                icons: {
                    primary: "ui-icon-circle-close"
                },
                text: false
            });
        });

        $(function() {
            $( "input:button, button,input:submit").button();
        });
        $("form button[type=button]").click(function() {
            $( 'button[type=button][clicked=true]' ).removeAttr("clicked");
            $(this).attr("clicked", "true");
            $(this).parent().submit()
        });
        $('a:[id^=title_]').click(function(event) {
            event.preventDefault();
            $('#story_box_'+$(this).attr('name')).toggle('slow', function() {
                // Animation complete.
            });
        });

        var name = $( "#id_name" ),
        estimated_time = $( "#id_estimated_time" ),
        description = $( "#id_description" ),
        tips = $( ".validate_tips" ),
        allFields = $( [] ).add( name ).add( estimated_time ).add( description );
        function updateTips( t ) {
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 5500 );
        }
        function checkLength( o, n, min ) {
            if ( o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips(  n + " is required." );
                return false;
            } else {
                return true;
            }
        }
        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }
        function resetStoryForm() {
            tips.text('Fill out all form fields.');
            allFields.val( "" ).removeClass( "ui-state-error" );

        }
        $( "#dialog_story_form" ).dialog({
            autoOpen: false,
            height: 410,
            width: 600,
            modal: true,
            buttons: {
                "Save": function() {
                    // var valid = true;
                    // allFields.removeClass( "ui-state-error" );
                    // valid = valid && checkLength( name, "Name", 3 );
                    // valid = valid && checkRegexp( estimated_time, /^[+-]?\d+(\.\d+)?$/i, "Estimated time must be a number." );
                    // if (valid) {
                        var $form = $('#dialog_story_form form'),
                        url = $form.attr('action'),
                        data = $form.serialize()+ '&response=story_planning';
                        $.ajax({
                            type: 'POST',
                            url: url,
                            dataType: 'json',
                            data: data,
                            success: function(data) {
                                // resetStoryForm();
                                // location.reload();
                                if (data.result == 'ok') {
                                    var html = $(data.html).html();
                                    $( '#stories' ).prepend(html);
                                    // updateStoryPb( 'div:[id=id_pb_'+data.id+']' );
                                    // resolveListener( 'span:[id=id_resolve_'+ data.id+']' );
                                    $( '#dialog_story_form' ).dialog( "close" );
                                } else {
                                    var html = $(data.html).html();
                                    $( '#dialog_story_form' ).empty();
                                    $( '#dialog_story_form' ).append(html);
                                }

                            },
                            error: function (data) {
                                showErrorMsg(data.responseText);
                            }
                        });
                        $( this ).dialog( "close" );
                    // }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#create-story" ).button().click(function() {
            // $( "#dialog_story_form" ).dialog( "open" );
            var id_iteration = $( this ).attr('val');
            console.log(id_iteration);
            var id_story = "";//$( this ).attr('id_st');
            $.ajax({
                type: 'GET',
                url: '/reqajax/story_form',
                dataType: 'json',
                data: {'id': id_story, 'iteration_id': id_iteration},
                success: function(data) {
                     var html = $(data).html();
                     $( '#dialog_story_form' ).append(html);
                     $( "#dialog_story_form" ).dialog( "open" );
                },
                error: function (data) {
                    showErrorMsg(data.responseText);
                }
            });
        });
        $( "#id_create_story_link" ).click(function(event) {
            event.preventDefault();
            $( "#dialog_story_form" ).dialog( "open" );
        });
        $('span:[id^=edit_desc_]').click(function(event) {
            event.preventDefault();
            var id = $(this).attr('value');
            var str = $('#id_desc_pre_' + id).text();
            $('#description_' + id).val(str);
            $('#edit_form_' + id).removeClass('hide');
            $('#id_desc_' + id).addClass('hide');
        });

        $('form:[id^=edit_description_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var desc = $form.find( 'textarea[name="description"]' ).val(),
                url = $form.attr( 'action' );
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { description: desc, story_id: story_id  },
                    success: function(data) {
                        toogleForms('#edit_form_' + story_id, '#id_desc_' + story_id);
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                toogleForms('#edit_form_' + story_id, '#id_desc_' + story_id);
            }
        });

        $('a:[id^=id_assigned_to_]').click(function(event) {
            event.preventDefault();
            var id = $(this).attr('value');
            $('#id_assigned_to_' + id).addClass('hide');
            $('#id_assigned_to_div_' + id).removeClass('hide');
        });

        $('form:[id^=assign_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var assigned_to = $form.find( 'select[name="assigned_to"]' ).val(),
                url = $form.attr( 'action' );
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { assigned_to: assigned_to, story_id: story_id  },
                    success: function(data) {
                        toogleForms('#id_assigned_to_div_' + story_id, '#id_assigned_to_' + story_id);
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                toogleForms('#id_assigned_to_div_' + story_id, '#id_assigned_to_' + story_id);
            }
        });

        $('a:[id^=id_estimated_time_]').click(function(event) {
            event.preventDefault();
            var id = $(this).attr('value');
            $('#id_estimated_time_' + id).addClass('hide');
            $('#id_estimated_time_div_' + id).removeClass('hide');
        });

        $('form:[id^=time_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var time = $form.find( 'input[name="time"]' ).val(),
                url = $form.attr( 'action' );
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { time: time, story_id: story_id  },
                    success: function(data) {
                        toogleForms('#id_estimated_time_div_' + story_id, '#id_estimated_time_' + story_id);
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                toogleForms('#id_estimated_time_div_' + story_id, '#id_estimated_time_' + story_id);
            }
        });

        $('a:[id^=id_priority_]').click(function(event) {
            event.preventDefault();
            var id = $(this).attr('value');
            $('#id_priority_' + id).addClass('hide');
            $('#id_priority_div_' + id).removeClass('hide');
        });
        $('form:[id^=priority_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var priority = $form.find( 'select[name="priority"]' ).val(),
                url = $form.attr( 'action' );
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { priority: priority, story_id: story_id },
                    success: function(data) {
                        toogleForms('#id_priority_div_' + story_id, '#id_priority_' + story_id);
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                toogleForms('#id_priority_div_' + story_id, '#id_priority_' + story_id);
            }
        });

        $('a:[id^=id_category_]').click(function(event) {
            event.preventDefault();
            var id = $(this).attr('value');
            $('#id_category_' + id).addClass('hide');
            $('#id_category_div_' + id).removeClass('hide');
        });
        $('form:[id^=category_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var category = $form.find( 'select[name="category"]' ).val(),
                url = $form.attr( 'action' );
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { category: category, story_id: story_id },
                    success: function(data) {
                        toogleForms('#id_category_div_' + story_id, '#id_category_' + story_id);
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                toogleForms('#id_category_div_' + story_id, '#id_category_' + story_id);
            }
        });

        $('a:[id^=edit_]').click(function(event) {
            event.preventDefault();
            var id = $(this).attr('value');
            var str = $('#title_' + id).text();
            $('#name_' + id).val(str);
            $('#id_name_' + id).addClass('hide');
            $('#id_name_div_' + id).removeClass('hide');
        });
        $('form:[id^=name_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var name = $form.find( 'input[name="name"]' ).val(),
                url = $form.attr( 'action' );
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { name: name, story_id: story_id },
                    success: function(data) {
                        toogleForms('#id_name_div_' + story_id, '#id_name_' + story_id);
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                toogleForms('#id_name_div_' + story_id, '#id_name_' + story_id);
            }
        });

        function toogleForms(hides, shows) {
            $(hides).addClass('hide');
            $(shows).removeClass('hide');
        }

        $('a:[id^=move_]').click(function(event) {
            event.preventDefault();
            var id = $(this).attr('value');
            $('#id_name_' + id).addClass('hide');
            $('#id_move_div_' + id).removeClass('hide');
        });
        $('form:[id^=move_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            story_id = $form.find( 'input[name="story_id"]' ).val(),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var story_container = $form.find( 'select[name="story_container"]' ).val(),
                url = $form.attr( 'action' );
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: { story_container: story_container, story_id: story_id },
                    success: function(data) {
                        toogleForms('#id_move_div_' + story_id, '#id_name_' + story_id);
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                toogleForms('#id_move_div_' + story_id, '#id_name_' + story_id);
            }
        });

        $('form:[id^=comment_story_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            comment = $form.find( 'textarea[name="comment"]' ).val(),
            url = $form.attr( 'action' ),
            story_id = $form.find( 'input[name="story_id"]' ).val();
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: { comment:comment, story_id: story_id  },
                success: function(data) {
                    $form.find( 'textarea[name="comment"]' ).val('');
                },
                error: function (data) {
                    showErrorMsg(data.responseText);
                }
            });
        });

        var categories = new Array(), data = new Array();
        '{% for uh in iteration.get_user_hours %}'
        categories.push('{{uh.0}}');
        data.push(parseFloat('{{uh.1}}'));
        '{% endfor %}'

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart_container',
                type: 'column'
                //                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: "Time assigned"
            },
            subtitle: {
                text: 'User vs Time'
            },
            xAxis: {
                categories: categories
                //                    [
                //                    'ram.rioja',
                //                    'dev.java',
                //                    'dev.js',
                //                    'dev.car'
                //                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Time (hrs)'
                }
            },
            legend: {
                align: 'left',
                verticalAlign: 'top',
                x: 40,
                y: 20,
                floating: true,
                borderWidth: 0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        Highcharts.numberFormat(this.y, 1) +
                        ' hours';
                }
                //
                //                formatter: function() {
                //                    return ''+
                //                        this.x +': '+ this.y +' hrs';
                //                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                    name: 'Estimated',
                    data: data,//[49.9, 50, 30, 25.5],
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        x: -3,
                        y: 10,
                        formatter: function() {
                            return this.y;
                        },
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }

                }]
        });
        
        var methos = {
            comment: function(data) {
                var str ='<div><li><div><a href="#" >'+data.user+'</a> <span>'+data.comment+'</span></div></li></div>';
                var html = $(str).html();
                $('#comments_'+data.story_id).append(html);
            },
            assign: function(data) {
                var id = '#id_assigned_to_'+data.story_id;
                $(id).text(data.assigned_to);
                showToolTip('#id_tooltip_assigned_' + data.story_id, data.user);
                updateSeries(data.series_hours);
            },
            time: function(data) {
                var id = '#id_estimated_time_'+data.story_id;
                $(id).text(data.estimated_time);
                showToolTip('#id_tooltip_time_' + data.story_id, data.user);
                updateSeries(data.series_hours);
            },
            priority: function(data) {
                var id = '#id_priority_'+data.story_id
                $(id).text(data.priority);
                showToolTip('#id_tooltip_priority_'+data.story_id, data.user);
            },
            category: function(data) {
                var id = '#id_category_'+data.story_id
                $(id).text(data.category);
                showToolTip('#id_tooltip_category_'+data.story_id, data.user);
            },
            name: function(data) {
                var id = '#title_'+data.story_id;
                $(id).text(data.name);
                showToolTip('#id_tooltip_title_' + data.story_id, data.user);
            },
            description: function(data) {
                var id = '#id_desc_pre_'+data.story_id;
                $('#id_desc_pre_'+data.story_id).text(data.text);
                showToolTip('#id_tooltip_desc_' + data.story_id, data.user);
            },
            move_story: function(data) {
                if (eval(data.update) == true) {
                    console.log('actualizar:'+data.update);
                    $('#id_story_' + data.story_id).remove();
                    updateSeries(data.series_hours);
                }
            }
        };
        addCallBackMethods(methos);

    });
</script>

{% endblock %}
